document.getElementById('fetch-btn').addEventListener('click', fetchVideoInfo);
document.getElementById('video-url').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') fetchVideoInfo();
});

function fetchVideoInfo() {
    const url = document.getElementById('video-url').value.trim();
    // const resultDiv = document.getElementById('result');
    const detailSection = document.getElementById('video-detail-section');
    const detailContent = document.getElementById('video-detail-content');
    if (!url) {
        // resultDiv.textContent = '请输入有效的短视频链接';
        detailSection.style.display = 'none';
        return;
    }
    // resultDiv.textContent = '正在获取信息，请稍候...';
    detailSection.style.display = 'none';

    // 使用假数据模拟接口返回
    setTimeout(() => {
        // 假数据示例，实际应由后端返回
        const data = {
            platform: "抖音",
            video_id: "1234567890",
            original_url: "https://v.douyin.com/xxxxxx/",
            title: "示例短视频标题",
            description: "这是一个用于演示的短视频描述。",
            content: "转写文本内容示例……",
            tags: ["搞笑", "生活", "宠物"],
            author: {
                id: "user_001",
                sec_uid: "MS4wLjABAAA...",
                nickname: "示例作者",
                avatar: "",
                signature: "个人简介签名",
                verified: false,
                follower_count: 12345,
                following_count: 67,
                region: "中国"
            },
            statistics: {
                like_count: 888,
                comment_count: 66,
                share_count: 22,
                collect_count: 10,
                play_count: 9999
            },
            media: {
                cover_url: "https://dummyimage.com/640x360/eee/aaa&text=Cover",
                video_url: "https://example.com/video.mp4",
                duration: 15,
                width: 640,
                height: 360,
                quality: "normal"
            },
            publish_time: "2024-05-01 12:34:56",
            update_time: null
        };

        detailContent.innerHTML = `
            <div class="detail-left">
                <img src="${escapeHTML(data.media.cover_url)}" alt="视频封面" class="detail-cover">
            </div>
            <div class="detail-right">
                <div class="detail-basic-grid">
                    <div class="detail-row"><span class="detail-label">标题</span><span class="detail-value">${escapeHTML(data.title)}</span></div>
                    <div class="detail-row"><span class="detail-label">平台</span><span class="detail-value">${escapeHTML(data.platform)}</span></div>
                    <div class="detail-row"><span class="detail-label">视频ID</span><span class="detail-value">${escapeHTML(data.video_id)}</span></div>
                    <div class="detail-row"><span class="detail-label">原始链接</span><span class="detail-value"><a href="${escapeHTML(data.original_url)}" target="_blank">${escapeHTML(data.original_url)}</a></span></div>
                    <div class="detail-row"><span class="detail-label">描述</span><span class="detail-value">${escapeHTML(data.description)}</span></div>
                    <div class="detail-row"><span class="detail-label">标签</span><span class="detail-value">${(data.tags||[]).map(escapeHTML).join("、")}</span></div>
                </div>
                <div class="detail-row"><span class="detail-label">转写内容</span><span class="detail-value">${escapeHTML(data.content)}</span></div>
                <div class="detail-row"><span class="detail-label">发布时间</span><span class="detail-value">${escapeHTML(data.publish_time)}</span></div>
                <div class="detail-row"><span class="detail-label">作者</span>
                    <span class="detail-value">
                        昵称：${escapeHTML(data.author.nickname)}<br>
                        ID：${escapeHTML(data.author.id)}<br>
                        签名：${escapeHTML(data.author.signature)}<br>
                        认证：${data.author.verified ? "已认证" : "未认证"}<br>
                        粉丝：${data.author.follower_count}，关注：${data.author.following_count}<br>
                        地区：${escapeHTML(data.author.region)}
                    </span>
                </div>
                <div class="detail-row"><span class="detail-label">统计</span>
                    <span class="detail-value">
                        👍 ${data.statistics.like_count}　
                        💬 ${data.statistics.comment_count}　
                        🔁 ${data.statistics.share_count}　
                        ⭐ ${data.statistics.collect_count}　
                        ▶️ ${data.statistics.play_count}
                    </span>
                </div>
                <div class="detail-row"><span class="detail-label">媒体</span>
                    <span class="detail-value">
                        分辨率：${data.media.width}×${data.media.height}<br>
                        时长：${data.media.duration}秒<br>
                        清晰度：${escapeHTML(data.media.quality)}<br>
                        <a href="${escapeHTML(data.media.video_url)}" target="_blank">下载视频</a>
                    </span>
                </div>
            </div>
        `;
        detailSection.style.display = 'block';
    }, 600); // 模拟网络延迟
}

function escapeHTML(str) {
    if (!str) return '';
    return str.replace(/[&<>"']/g, function(m) {
        return ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        })[m];
    });
}